<template>
	<app-layout>
		<view class="template-order">
			<tn-nav-bar :bottomShadow="!!0">人员列表</tn-nav-bar>
			<!-- 顶部标签 -->
			<!-- 顶部自定义导航 -->
			<view class="tabs-fixed tn-bg-white">
				<view class="tn-flex tn-flex-col-between tn-flex-col-center tn-padding-top-sm"
					:style="{marginTop: vuex_custom_bar_height + 'px'}">
					<view class="justify-content-item" style="width: 87vw;overflow: hidden;">
						<tn-tabs ref="tabs" class="tabs" :list="list" :countshow="countshow" :isScroll="false"
							:current="level" name="details" style="width: 87vw;" @change="tabsChange"></tn-tabs>
					</view>

					<view class="justify-content-item" style="width: 13vw;overflow: hidden;" @click="findshow">
						<view class="tn-color-black tn-round"
							style="font-size: 45rpx;margin-top: -5rpx;margin-left: 15rpx;">
							<text class="tn-icon-search tn-padding-xs"></text>
						</view>

					</view>
				</view>
			</view>


			<userlist @userclick="checkface" :list="userlist" :rwzq="rwzq" :mfjc="mfjc" :mfbj="mfbj" :fjfl="countshow" :issearch="search"></userlist>

			<view class="">
				<userselect ref="userselect" @select="findsome" @close="userclose" :xb="xbshow"></userselect>
			</view>
		</view>

	</app-layout>
</template>

<script>
	import templatePageMixin from '@/libs/mixin/template_page_mixin.js'
	import userselect from '@/components/user-select.vue';
	import {
		mapGetters,
		mapState
	} from "vuex";
		
	export default {
		name: 'userselectlist',
		mixins: [templatePageMixin],
		components: {
			userselect
		},
		data() {
			return {
				list: [],
				//当前选中的模式 用户等级  一级 二级 三级 四级 默认全部 		
				levelist2: ["全部", "一级", "二级", "三级", "四级", "未分类"],
				level: "",
				//检查类型  1走访2尿检3发检
				type: 0,
				//分类  1辖区内2委托
				fenlei: 0,
				//ischeck 人脸识别模式 默认非
				ischeck: 0,
				//任务模式 zq等级
				zq: 0,
				
				//jctype 发检专用分类 1突击毛发检测 2补检突击毛发检测 3毛发检测(只有委托任务)
				jctype: '',
				userlist: [],
				param: {},
				page: 1,
				requseturl: this.$api.user.list,
				curr: 0,
				search:'',
			
			}
		},
		onLoad(options) {
			this.curr = options.level ? parseInt(options.level) : this.curr;
			this.type = options.type ? options.type : this.type;
			this.fenlei = options.fenlei ? options.fenlei : this.fenlei;
			this.zq = options.zq ? options.zq : this.zq;
			this.jctype = options.jctype ? options.jctype : this.jctype;
			uni.setNavigationBarTitle({
				title: `人员列表`
			})
			//fenlei有值任务模式    fenlei为空用户列表模式 
			//检查类型  1走访2尿检3发检
			if (this.fenlei) {
				if (this.type == 1) {
					this.requseturl = this.$api.interview.userlist
				} else if (this.type == 2) {
					this.requseturl = this.$api.urinecheck.userlist
				} else if (this.type == 3) {
					this.requseturl = this.$api.hair.userlist
				}
			}
			this.ischeck = options.type ? 1 : this.ischeck;
			// this.param =e.param ? decodeURIComponent(e.param) : ''
			this.getList()
			// this.getlevel()
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo,
			}),
			rwzq() {
				return this.fenlei == 1 && (this.type == 1 || this.type == 2) ? true : false
			},
			mfjc() {
				return this.jctype == 1 ? true : false
			},
			mfbj() {
				return this.jctype == 2 ? true : false
			},
			// 待尿检、待走访、待毛发、待补检
			xbshow(){
				return this.fenlei ? true : false
			},
			countshow(){
				return true
			}
			

		},
		onShow() {
				if(!this.userinfo){
					this.$user.getInfo()
				}
			},
		onReachBottom() {
			this.getList();
		},


		methods: {
			// 跳转
			checkface(user) {
				// 待分类人员，不能点进去查看人员详情
				if (this.level == 5) {
					return false;
				}
				let url = `/discoveryPages/userinfo?id=${user.mfid}&checkname=${user.username}`;
				
				if (this.ischeck) {
					// 5.当用户组为zr和pcs时，显示下方区域，点进去后显示列表，但无所有业务的录入功能，只能查看。
					if(this.userinfo.usergroup=='pcs'||this.userinfo.usergroup=='zr'){
						return false;
					}
					//根据检查类型决定验证后跳转的路径，检查类型  1走访2尿检3发检
					let return_url = `/discoveryPages/interview/add?mfid=${user.mfid}`
					//有值则为任务模式
					if (this.type == 1) {
						return_url = `/discoveryPages/interview/add?mfid=${user.mfid}`
						//走访无需人脸核验
						uni.navigateTo({
							url: return_url
						});
						return false;
					} else if (this.type == 2) {
						return_url = `/discoveryPages/urinecheck/add?mfid=${user.mfid}`
					} else if (this.type == 3) {
						return_url = `/discoveryPages/hair/add?mfid=${user.mfid}&isqrcode=${user.isqrcode || 1}`
					}

					if (this.fenlei) {
						return_url = `${return_url}&tid=${user.id}`
					}
					this.$t.vuex('return_url', return_url)
					url = `/discoveryPages/check?id=${user.mfid}&checktype=${this.type}`
				}
				uni.navigateTo({
					url: url
				});
			},

			// 标签栏值发生改变
			tabsChange(index) {
				this.level = index
				this.page = 1;
				this.getList();
			},
			findsome(e) {
				this.page = 1;
				this.search = e;
				this.getList()
			},

			findshow() {
				//关闭搜索框
				this.$refs['userselect'].show = !!1;
			},

			userclose(e) {
			},

			//获取人员类型
			getlevel() {
				let t = this;
				this.$t.message.loading('加载中');
				this.$request({
					url: this.$api.common.typelist,
					data: {
						did: 11
					},
					method: 'POST'
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						this.list = this.list.concat(response.list);
					}
					this.$t.message.closeLoading();
				});
			},

			getList() {
				let t = this;
				if (t.page == 1) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 0
					})
				}
				t.$t.message.loading('加载中');
				this.$request({
					url: t.requseturl,
					method: "POST",
					data: {
						limit_page: t.page,limit_count:20,
						// type	整型	必须		最小：1；最大：2	分类 1辖区内2委托
						type: t.fenlei,
						// fcfl	字符串	必须	全部		
						zq: t.zq,
						//分类 一级 二级 三级 四级 默认全部
						fcfl: t.list.length > 0 ? t.list[t.level].name : t.levelist2[t.curr],
						//jctype 发检专用分类 1突击毛发检测 2补检突击毛发检测 3毛发检测(只有委托任务)
						jctype: t.jctype,
						...t.search
					}
				}).then(response => {
					t.$t.message.closeLoading();
					if (response.code === 0) {
						if (response.fcfl && response.fcfl.length > 0) {
							t.list = response.fcfl
							if (t.level === '') {
								t.level = t.curr;
							}
						}
						if (t.page !== 1) {
							t.userlist = t.userlist.concat(response.list);
						} else {
							t.userlist = response.list;
						}
						t.page = response.list.length ? t.page + 1 : t.page;

					} else {
						uni.showModal({
							title: '',
							content: msg,
							showCancel: false,
						});
					}
				}).catch((msg) => {
					t.$t.message.toast(msg);
					t.$t.message.closeLoading();
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.nobody {
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.face {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
	}

	.search {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: inherit;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0vw;
		box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.07);
		z-index: 99;
		background-color: #FFFFFF;
		height: 100rpx;

		.city {
			border-right: 2rpx solid #888888;
			margin: 0 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.box {
			margin-right: 50rpx;
		}
	}

	.tabs {}
</style>